<template>
  <div class="my-team">
    <div class="team-head">
      <div class="now-level">当前等级: {{ getUserLevel() }}</div>
      <div class="head-list">
        <div class="list-card">
          <span class="card-top">{{ teamInfo.tan_count || '--' }}人</span>
          <span class="card-bottom">我的团队</span>
        </div>
        <div class="list-card">
          <span class="card-top">{{ teamInfo.direct_count || '--' }}人</span>
          <span class="card-bottom">我的直推</span>
        </div>
        <div class="list-card">
          <span class="card-top">{{ teamInfo.interpenetration_count || '--' }}人</span>
          <span class="card-bottom">我的间推</span>
        </div>
      </div>
      <div class="head-list">
        <div class="list-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.tan_property, 2) || '--' }}AVM</span>
          <span class="card-bottom">团队总业绩</span>
        </div>
        <div class="list-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.first_property, 2) || '--' }}AVM</span>
          <span class="card-bottom">直推总业绩</span>
        </div>
        <div class="list-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.interpenetration_property, 2) || '--' }}AVM</span>
          <span class="card-bottom">间推总业绩</span>
        </div>
      </div>
    </div>
    <div class="team-body1">
      <div class="body1-title">
        <span class="title-txt">邀请链接</span>
        <img class="to-left" src="../assets/images/to-left.png" alt="">
      </div>
      <div class="body1-content">
        {{ baseUrl }}h5?address={{ teamInfo?.wallet_address }}
      </div>
      <!--      <div class="body1-content" v-else>未生成链接</div>-->
      <div class="body1-bottom" @click="copyInvite">复制邀请链接</div>
      <!--      <div class="body1-bottom" v-else>请先质押</div>-->
    </div>
    <div class="team-body2">
      <div class="body2-head">
        <div class="head-title">
          <span class="title-txt">我的奖励</span>
          <img class="tip-img" src="../assets/images/tip.png" alt="" @click="isRewardDescriptionShow = true">
          <img class="to-left" src="../assets/images/to-left.png" alt="">
        </div>
        <div class="head-right" @click="toReward">奖励记录</div>
      </div>
      <div class="body2-content">
        <div class="content-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.dynamic_returns, 2) || '--' }}AVM</span>
          <span class="card-bottom">总释放奖励</span>
        </div>
        <div class="content-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.today_gbt, 2) || '--' }}AVM</span>
          <span class="card-bottom">今日释放奖励</span>
        </div>
        <div class="content-card">
          <span class="card-top">{{ sliceDecimal(teamInfo.yesterday_gbt, 2) || '--' }}AVM</span>
          <span class="card-bottom">昨日释放奖励</span>
        </div>
      </div>
    </div>
    <div class="team-foot">
      <van-tabs v-model:active="active" @click-tab="checkoutTab">
        <van-tab title="我的团队" name="1">
          <van-list
              v-model:loading="teamLoading"
              :finished="teamFinished"
              finished-text="没有更多了"
              @load="onTeamLoad"
          >
            <div class="team-item-head">
              <span style="width: 35%;">邀请时间</span>
              <span style="width: 35%;">地址</span>
              <span style="width: 30%;">质押数量</span>
            </div>
            <div class="team-item-list">
              <div class="list-card" v-for="(item, index) in teamLists" :key="index">
                <span style="width: 35%">{{ item.create_time || '--' }}</span>
                <span style="width: 35%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
                <span style="width: 30%">{{ item.user_money || '--' }}AVM</span>
              </div>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="我的直推" name="2">
          <van-list
              v-model:loading="teamLoading"
              :finished="teamFinished"
              finished-text="没有更多了"
              @load="onTeamLoad"
          >
            <div class="team-item-head">
              <span style="width: 35%;">邀请时间</span>
              <span style="width: 35%;">地址</span>
              <span style="width: 30%;">质押数量</span>
            </div>
            <div class="team-item-list">
              <div class="list-card" v-for="(item, index) in teamLists" :key="index">
                <span style="width: 35%">{{ item.create_time || '--' }}</span>
                <span style="width: 35%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
                <span style="width: 30%">{{ item.user_money || '--' }}AVM</span>
              </div>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="我的间推" name="3">
          <van-list
              v-model:loading="teamLoading"
              :finished="teamFinished"
              finished-text="没有更多了"
              @load="onTeamLoad"
          >
            <div class="team-item-head">
              <span style="width: 35%;">邀请时间</span>
              <span style="width: 35%;">地址</span>
              <span style="width: 30%;">质押数量</span>
            </div>
            <div class="team-item-list">
              <div class="list-card" v-for="(item, index) in teamLists" :key="index">
                <span style="width: 35%">{{ item.create_time || '--' }}</span>
                <span style="width: 35%">{{ textSubstr(item.wallet_address, 4) || '--' }}</span>
                <span style="width: 30%">{{ item.user_money || '--' }}AVM</span>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!--    奖励说明弹窗-->
    <van-popup v-model:show="isRewardDescriptionShow">
      <div class="description-box">
        <div class="description-title">奖励说明</div>
        <table>
          <tr>
            <th>会员等级</th>
            <th>收益代数</th>
            <th>动态奖励</th>
          </tr>
          <tr v-for="(item, index) in 8" :key="item">
            <td>V{{ index + 1 }}</td>
            <td>{{ index + 1 }}代</td>
            <td>20%</td>
          </tr>
          <tr>
            <td>......</td>
            <td>......</td>
            <td>......</td>
          </tr>
          <tr>
            <td>V20</td>
            <td>20代</td>
            <td>20%</td>
          </tr>
        </table>
        <p>直推产出AVM收益20%，间推以直推20%基数的80%递
          减，推荐一名有效用户拿一代，推荐二名有效用户拿两代
          以此类推，推荐二十名有效用户拿二十代</p>
        <svg t="1692770050364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4015" width="24" height="24" @click="isRewardDescriptionShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13F6C4" p-id="4016"></path>
        </svg>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import req from '@/libs/req';
import {textSubstr, sliceDecimal, formatNum, copyText} from '@/libs/utlis.js';
import {showSuccessToast} from 'vant';
import {useRouter} from 'vue-router';

let baseUrl = import.meta.env.VITE_BASE_URL;

const router = useRouter();
const active = ref(1);
const teamLists = ref([]);
const teamLoading = ref(false);
const teamFinished = ref(false);
const isRewardDescriptionShow = ref(false); // 奖励说明弹窗
const descriptionLists = ref([]); // 奖励说明数据列表
const teamInfo = ref({});
const pageNum = ref(1);
const pageSize = ref(10);

// 点击复制文本
const copyInvite = () => {
  const str = `${baseUrl}h5?address=${teamInfo.value?.wallet_address}`;
  copyText(str);
  showSuccessToast('复制成功!');
};
// 印射用户等级
const getUserLevel = () => {
  let txt;
  switch (teamInfo.value?.level) {
    case 0:
      txt = '普通用户';
      break;
    default:
      txt = `V${teamInfo.value?.level}`;
      break;
  }
  return txt;
};
// 获取我的团队详细数据
const getInfo = async () => {
  const res = await req.post('Pledge/myTuan');
  teamInfo.value = res;
  console.log(res, 'getInfo');
};
// 点击切换tab栏
const checkoutTab = () => {
  teamLists.value = [];
  onTeamLoad();
};
// 我的团队获取数据
const onTeamLoad = async () => {
  teamLoading.value = true;
  const res = await req.post('Index/tanlist', {
    type: active.value,
    page_size: pageSize.value,
    page_no: pageNum.value,
  });

  if (pageNum.value === 1) {
    teamLists.value.splice(0, teamLists.value.length)
    teamFinished.value = false
  }

  if (res.list.length < pageSize.value) {
    teamFinished.value = true
  } else {
    pageNum.value += 1
  }

  teamLists.value.push(...res.list);
  teamLoading.value = false;

};

function toReward() {
  router.push('/reward_record?type=2');
}

onMounted(() => {
  getInfo();
});
</script>
<style scoped lang="scss">
.my-team {
  padding-top: 15px;
  min-height: 100vh;

  .team-head {
    background: #10221D;
    border: 1px dashed #13F6C4;
    margin: 0 15px;

    .now-level {
      display: inline-block;
      font-size: 15px;
      font-weight: 600;
      color: #000;
      padding: 9px 8px;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 0px 30px 30px 0px;
      margin-top: 13px;
    }

    .head-list {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 30px 0 34px 0;

      .list-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #FBF5F5;

        .card-top {
          font-size: 18px;
          margin-bottom: 4px;
        }

        .card-bottom {
          font-size: 12px;
        }
      }
    }
  }

  .team-body1 {
    background: #10221D;
    border: 1px dashed #13F6C4;
    margin: 15px 15px 15px;
    padding: 26px 12px 29px 012px;

    .body1-title {
      font-size: 15px;
      display: flex;
      align-items: center;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      .to-left {
        width: auto;
        height: 14px;
        margin-left: 5px;
      }
    }

    .body1-content {
      font-size: 14px;
      font-weight: 400;
      color: #F7AC15;
      padding: 18px 12px;
      border-radius: 5px;
      background-color: #000;
      margin: 13px 0 17px 0;
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏超出容器的部分 */
      text-overflow: ellipsis; /* 使用省略号来表示被截断的文本 */
    }

    .body1-bottom {
      font-size: 17px;
      color: #000;
      text-align: center;
      padding: 13px 0;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
      margin: 0 10px;
    }
  }

  .team-body2 {
    background: #10221D;
    border: 1px dashed #13F6C4;
    margin: 0 15px;
    padding: 0 15px;

    .body2-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .title-txt {
        font-size: 15px;
        font-weight: 500;
        background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .tip-img {
        width: 13px;
        height: 13px;
        margin: 0 8px 0 4px;
      }

      .to-left {
        height: 14px;
        width: auto;
      }

      .head-right {
        font-size: 14px;
        color: #FBF5F5;
        margin-top: 8px;
      }
    }

    .body2-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 43px 0 29px 0;
      padding: 0 10px;

      .content-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #FBF5F5;

        .card-top {
          font-size: 18px;
          margin-bottom: 4px;
        }

        .card-bottom {
          font-size: 12px;
        }
      }
    }
  }

  .team-foot {
    .team-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #F7AC15;
      text-align: center;
    }

    .team-item-list {
      .list-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        font-size: 14px;
        color: #f6f6f6;
        margin-top: 24px;
      }
    }
  }

  .description-box {
    position: relative;
    width: 90vw;
    border-radius: 10px;
    background-color: #000;
    border: 1px solid #13F6C4;

    .description-title {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      color: #F6F6F6;
      margin: 20px 0 28px 0;
    }

    table {
      width: 94%;
      text-align: center;
      border: 2px solid #7C7C7C;
      border-collapse: collapse;
      margin: 0 auto;

      td, th {
        border: 1px solid #ddd;
        padding: 10px 0;
        font-size: 15px;
        color: #fff;
      }
    }

    p {
      font-size: 12px;
      line-height: 24px;
      color: #F7AC15;
      margin: 17px 13px 20px;
    }

    svg {
      position: absolute;
      top: 12px;
      right: 15px;
    }
  }
}

:deep(.van-tabs__wrap) {
  height: auto;
  padding: 31px 12px 6px;
  margin: 0 15px 23px;
}

:deep(.van-tabs__nav) {
  background-color: #1E1E1E;
  border-radius: 30px;
}

:deep(.van-tab--active) {
  color: #010101;
  padding: 6px 12px;
  background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
  border-radius: 30px;
}

:deep(.van-tabs__line) {
  display: none;
}

:deep(.van-popup--center) {
  border-radius: 10px;
}
</style>
